<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav mui-bar-transparent">	
			<a class="mui-icon mui-icon-back mui-action-back mui-pull-left"></a>
			<h1 class="mui-title" id="title">章节</h1>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded">
				<!--<h4 style="text-align: center;" v-html="chapter.title">外篇一 神朝将崩</h4>-->
				<div style="white-space: pre-line; margin-top: 10px;margin-bottom: 50px; " class="mui-row" v-html="chapter.Content" id="divContent">
					s
				</div>
			</div>
			
			
		</div>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-previous" href="#" style="color: blue;" id="btnPrevious">上一页</a>
			<a class="mui-tab-item" href="#" style="color: blue;"><span id="current">2</span>/<span id="total">3170</span></a>
			<a class="mui-tab-item mui-next" href="#" style="color: blue;" id="btnNext">下一页</a>
		</nav>
		
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js" ></script>
		<script type="text/javascript" src="../js/app.js" ></script>
		<script type="text/javascript">
			mui.init()
			function getDefaultData() {
				return {
					"Id":"20f4544b-1583-4870-b9ad-eb1340f85c2b",
					RefContentId:"cecab15d-b40e-4625-b848-571bc9947b46",
					"Index":"",
					"Title":"第一章　总则",
					"Content":"第一条　为了保证食品安全，保障公众身体健康和生命安全，制定本法。\n\n",
				}
			}
			var vm = new Vue({
				el: '.mui-content',
				data: {
					refContentId:"",
					chapterKeys:[],
					readIndex:0,
					chapter:getDefaultData(),
				},
				methods:{
					resetData:function(){//重置数据
						this.$data.refContentId="";
						this.$data.chapterKeys=[];
						this.$data.readIndex=0;
						this.$data.chapter=getDefaultData();
					}
				}
			});
			//窗口隐藏时，重置页面数据
			mui.plusReady(function () {
				var btnPrevious = document.getElementById("btnPrevious");
				btnPrevious.addEventListener('tap', function(event) {
					if(vm.readIndex <= 0)
					{
						mui.toast("已是首页，没有更多内容！");
						return;
					}
					vm.readIndex = vm.readIndex -1;
					loadContent(vm.readIndex,vm.chapterKeys[vm.readIndex]);
				});
				
				var btnNext = document.getElementById("btnNext");
				btnNext.addEventListener('tap', function(event) {
					if(vm.readIndex >= vm.chapterKeys.length - 1){
						mui.toast("已是最后一页，没有更多内容！");
						return;
					}
					vm.readIndex = vm.readIndex +1;
					loadContent(vm.readIndex,vm.chapterKeys[vm.readIndex]);
				});
				
				var self = plus.webview.currentWebview();
				self.addEventListener("hide",function (e) {
					window.scrollTo(0, 0);
					vm.resetData();
				},false);
			})
			//监听自定义事件，获取新闻详情
			document.addEventListener('get_detail', function(event) {
				var keyValue = event.detail.keyValue;
				console.log("keyValue="+keyValue);
				if(!keyValue) {
					return;
				}
				vm.chapter.Title = "";
				vm.chapter.Content = "";
				vm.refContentId = event.detail.keyValue;
				vm.readIndex = event.detail.readIndex;
				
				var doc = app.getDocument(vm.refContentId);
				console.log("keyValue="+vm.refContentId +" readIndex="+vm.readIndex+ " doc="+JSON.stringify(doc));
				vm.chapterKeys = doc.ChapterKeys;
				
				document.getElementById("total").innerHTML = vm.chapterKeys.length;
				if(vm.readIndex >= 0 && vm.readIndex < vm.chapterKeys.length)
				{
					loadContent(vm.readIndex,vm.chapterKeys[vm.readIndex]);
				}
			});
			/**
			 * 加载内容
			 **/
			function loadContent(readIndex,keyValue){
				/*加载数据*/
				var setting = app.getSetting();
				var ajaxUrl = setting.ServerUrl +"/api/TrainChapter/GetFormJson?keyValue="+keyValue;
				console.log(ajaxUrl);
				plus.nativeUI.showWaiting("正在加载数据，请稍候...");
				mui.ajax(ajaxUrl,{
					dataType:'json',//服务器返回json格式数据
					type:'get',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					headers:{'Content-Type':'application/json'},	              
					success:function(result){
						plus.nativeUI.closeWaiting();
						//服务器返回响应，根据响应结果，分析是否登录成功；
						console.log(JSON.stringify(result));
						if(result.ResultType != 0){
							mui.toast(result.Content);
							return;
						}
						/*保存阅读记录,以便下次重新阅读*/
						var doc = app.getDocument(vm.refContentId);
						doc.ReadIndex = vm.readIndex;	
						app.addDocument(vm.refContentId,doc);
				
						document.getElementById("divContent").innerHTML = "";
						vm.chapter ={};
						vm.chapter = JSON.parse(result.AppendData);
						/**/
						vm.chapter.Content = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+vm.chapter.Content;
						document.getElementById("title").innerHTML = vm.chapter.Title;
						document.getElementById("current").innerHTML = vm.readIndex + 1;
					},
					error:function(xhr,type,errorThrown){
						plus.nativeUI.closeWaiting();
						//异常处理；
						console.log(type);
						mui.toast("加载数据异常！");
					}
				});
			}
			
			//重写返回逻辑
			mui.back = function() {
				var self = plus.webview.currentWebview();
				self.hide("auto", 300);
			}
			
			
		</script>
	</body>

</html>